<template>
  <u-modal v-model="show" :show-title="false" :show-confirm-button="false" :mask-close-able="maskCloseAble" @maskClick="_close">
    <template slot="default">
      <view class="modelBox">
        <view class="u-p-40" :class="{'u-m-t-30 u-m-b-30': title === 'none'}">
          <view class="fz-18 fw5 tc viceColorN8 linh-24">{{title === 'none' ? '' : title}}</view>
          <view class="tc u-p-t-16 linh-22 contentBox" :style="style" v-html="content"></view>
        </view>
        <view class="btnBox">
          <view class="btn" @click="_close" v-if="claceShow">{{claceText}}</view>
          <view class="btn themeFontColor" :style="claceShow ? '' : 'width:100%;'" @click="_config">{{configText}}</view>
        </view>
      </view>
    </template>
  </u-modal>
</template>

<script>
export default {
  props: {
    show:{
      type: Boolean,
      default: false
    },
    // 提示内容样式
    style: {
      type: String,
      default: 'color: #969799;'
    },
    title: {
      type: String,
      default: '提示'
    },
    content: {
      type: String,
      default: '是否确认进行此操作？'
    },
    claceShow:{
      type: Boolean,
      default: true
    },
    claceText:{
      type: String,
      default: '取消'
    },
    configText: {
      type: String,
      default: '确定'
    },
    maskCloseAble: { // 点击遮罩是否关闭弹窗
      type: Boolean,
      default: false
    }
  },
  methods:{
    _close(){
      this.$emit('close')
    },
    _config(){
      this.$emit('config')
    }
  }
}
</script>
<style lang="scss" scoped>
.modelBox{
  border-radius: 32rpx;
  .btnBox {
    display: flex;
    line-height: 96rpx;
    font-size: 32rpx;
    .btn {
      width: 50%;
      text-align: center;
      box-shadow: 2rpx -2rpx 2rpx #ebedf0;
      color: #969799;
      font-weight: 500;
    }
  }
}

</style>>